<template>
  <view class="weather-section">
    <!-- 城市选择器：新增泉州，默认可选泉州 -->
    <picker mode="selector" :range="cityList" :value="cityIndex" @change="onCityChange">
      <view class="city-picker">当前城市：{{cityList[cityIndex]}}</view>
    </picker>
    
    <button @click="getWeather">获取当前城市实时天气预报</button>
    <view v-if="isLoading" class="loading">加载中...</view>
    
    <!-- 真实天气数据显示（含泉州实时数据） -->
    <view v-if="weatherInfo" class="weather-info">
      <view class="weather-title">{{weatherInfo.city}} 实时天气</view>
      <view class="weather-main">
        <image :src="getWeatherIcon(weatherInfo.weather)" class="weather-icon"></image>
        <view class="temp">{{weatherInfo.temp}}°C</view>
      </view>
      <view class="weather-detail">
        <view>天气状况：{{weatherInfo.weather}}</view>
        <view>湿度：{{weatherInfo.humidity}}%</view>
        <view>风向：{{weatherInfo.windDirection}}</view>
        <view>风力：{{weatherInfo.windPower}}级</view>
        <view>更新时间：{{weatherInfo.updateTime}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weatherInfo: null,
      isLoading: false,
      // 新增「泉州」，城市编码：350500（高德API官方泉州编码，确保数据准确）
      cityList: ['泉州', '北京', '上海', '广州', '深圳', '杭州', '成都', '西安'],
      cityCode: ['350500', '110000', '310000', '440100', '440300', '330100', '510100', '610100'],
      cityIndex: 0, // 默认选中「泉州」（可改为其他索引，比如0=泉州，1=北京）
      // 替换为你自己申请的高德API密钥！！！（必须填，否则无法获取数据）
      amapKey: '你的高德API密钥（Key）'
    }
  },
  methods: {
    // 切换城市（支持切换到泉州）
    onCityChange(e) {
      this.cityIndex = e.detail.value;
      this.weatherInfo = null; // 切换城市后清空之前的天气数据
    },
    
    // 获取真实天气数据（泉州数据通过编码350500获取，100%真实）
    getWeather() {
      if (!this.amapKey) {
        uni.showToast({ title: '请先配置高德API密钥', icon: 'none' });
        return;
      }
      
      this.isLoading = true;
      const currentCityCode = this.cityCode[this.cityIndex]; // 选中泉州时，编码为350500
      
      // 高德地图实时天气API（传入泉州编码，获取泉州真实天气）
      const apiUrl = `https://restapi.amap.com/v3/weather/weatherInfo?city=${currentCityCode}&key=${this.amapKey}&extensions=base`;
      
      uni.request({
        url: apiUrl,
        method: 'GET',
        success: (res) => {
          const result = res.data;
          // 接口调用成功（高德API返回 status: "1" 表示成功）
          if (result.status === "1" && result.lives.length > 0) {
            const realTimeWeather = result.lives[0];
            // 解析泉州（或其他城市）的真实天气数据
            this.weatherInfo = {
              city: realTimeWeather.city, // 城市名称（会显示「泉州」）
              temp: realTimeWeather.temperature, // 泉州实时温度
              weather: realTimeWeather.weather, // 泉州天气状况（晴/阴/雨等）
              humidity: realTimeWeather.humidity, // 泉州湿度
              windDirection: realTimeWeather.winddirection, // 泉州风向
              windPower: realTimeWeather.windpower, // 泉州风力
              updateTime: realTimeWeather.reporttime // 数据更新时间（确保实时）
            };
          } else {
            uni.showToast({ title: '获取天气失败，请重试', icon: 'none' });
            console.error('天气API返回错误：', result.info);
          }
        },
        fail: (err) => {
          console.error('网络请求失败：', err);
          uni.showToast({ title: '网络异常，请检查连接', icon: 'none' });
        },
        complete: () => {
          this.isLoading = false;
        }
      });
    },
    
    // 天气图标匹配（可选，提升美观度）
    getWeatherIcon(weather) {
      if (weather.includes('晴')) {
        return 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
      } else if (weather.includes('雨')) {
        return 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png';
      } else if (weather.includes('阴') || weather.includes('云')) {
        return 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-blue.png';
      } else {
        return 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-yellow.png';
      }
    }
  }
}
</script>

<style>
.weather-section {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}

/* 城市选择器样式 */
.city-picker {
  padding: 15rpx;
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
  color: #333;
}

.weather-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #333;
  text-align: center;
}

/* 天气主信息（图标+温度） */
.weather-main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.weather-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.temp {
  font-size: 60rpx;
  font-weight: bold;
  color: #333;
}

/* 天气详情 */
.weather-detail {
  line-height: 2;
  color: #666;
  font-size: 28rpx;
}

.loading {
  margin-top: 20rpx;
  color: #999;
  text-align: center;
  font-size: 28rpx;
}
</style>